<template>
  <div class="backlog">
    <el-table v-loading="loading" :data="populationList" max-height="326.5">
      <el-table-column type="index" width="50" label="序号"> </el-table-column>
      <!-- <el-table-column type="selection" width="55" align="center" /> -->

      <el-table-column label="剩余时间" align="center" prop="name">
        <template slot-scope="scope">
          <!-- <a @click="handleView(scope.row)" class="link-type"> -->
          <span>{{ scope.row.name }}</span>
          <!-- </a> -->
        </template>
      </el-table-column>
      <el-table-column label="事件标题" align="center" prop="idcard" />

      <el-table-column
        label="登记时间"
        align="center"
        :formatter="hzgxFormat"
        prop="withFamilyHeadedRelation"
      />
      <el-table-column
        label="事发地址"
        align="center"
        prop="currentResidentialAddress"
      />
      <el-table-column
        label="当前环节"
        align="center"
        :formatter="rylbFormat"
        prop="populationTypes"
      />
      <!-- <el-table-column label="联系电话" align="center" prop="phone" /> -->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit"
            >处理</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import pagination from "./page.vue";
import { data } from "./data.js";
export default {
  components: {
    pagination,
  },
  data() {
    return {
      populationList: [],
      total: data.length,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      populationList: [],
    };
  },
  created() {
    this.populationList = data.slice(
      (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
      this.queryParams.pageNum * this.queryParams.pageSize
    );
  },
  methods: {
    getList(val) {
      // 后端分页
      this.$http("post", "/table_page", {
        queryParams: this.queryParams,
      }).then((res) => {
        console.log(res);
        this.populationList = res.data_json;
      });
      // 前端分页
      // this.populationList = data.slice(
      //   (this.queryParams.pageNum - 1) * this.queryParams.pageSize,
      //   this.queryParams.pageNum * this.queryParams.pageSize
      // );
    },
  },
};
</script>
